<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        li {
            border: 1px dashed;
            padding-left: 5px;
            line-height: 35px;
        }
        li:hover {
            background-color: aquamarine;
            transition: all 0.8s ease; /* 背景色也可以有动画 */
        }
        #toolBar {
            margin: 10px 38px;
        }

        /*transition-group的默认动画定义*/
        .v-enter, .v-leave-to {
            transform: translateY(100px);
            opacity: 0;
        }

        .v-enter-active, .v-leave-active {
            transition: all 2s ease;
            width: 100%; /*此样式为了下面移除动画设置，否则移除动画仅仅是wrap包含的文字部分而不是li整体*/
        }

        /*v-move v-leave-active 配合使用来实现元素移除时，后续元素飘上来的动画效果*/
        .v-move {
            transition: all 0.6s ease;
        }
        .v-leave-active {
            position: absolute;  /*需要配合v-move使用，不加该属性，无法实现飘动填补效果*/
        }
    </style>
</head>
<body>
<div id="app">
    <div id="toolBar">
        <label>
            name:
            <input type="text" v-model="name" @keyup.enter="add">
        </label>
        <button @click="add">add</button>
    </div>
    <!--<ul>-->
        <!--当对列表v-for做动画时，不能再使用transition，需要使用transition-group标签-->
        <!--每个元素都有动画效果需要在使用v-for时指定:key属性，用来唯一标识元素-->
        <!--transition-group的appear属性，设置该属性后，在页面刚加载显示出来的时候使用入场动画而不是直接显示-->
        <!--transition-group的tag属性用来指定要渲染的元素标签，默认是渲染成一个span但是li应该在ul下而不是span，
        所有手动指定后，生成ul即可，注释掉原来的ul-->
        <transition-group appear tag="ul">
            <li v-for="(item, i) in list" :key="item.name" @click="del(i)">
                {{i}} -- {{item.name}}
            </li>
        </transition-group>
    <!--</ul>-->

</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<script>

    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            list: [
                {name: 'tom'},
                {name: 'li'},
                {name: 'cat'},
            ]
        },
        methods: {
            add() {
                this.list.push({name: this.name});
                this.name = '';
            },
            del(i) {
                // 移除元素
                this.list.splice(i, 1);
            }
        },
    });
</script>
</body>
</html>
